<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title id="doc-title">Miaouuuu~</title><!--change-->
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <link rel="stylesheet" href="kirarastyle.css" type="text/css" /><!--change-->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
    <script src="https://code.iconify.design/iconify-icon/1.0.2/iconify-icon.min.js"></script>
    <link href="img/favicon.ico" rel="shortcut icon">
    <script src="./jquery.min.js"></script>

</head>

<body>
    <div id="welcome-page">
        <h2>Click to Continue</h2>
        <br />
        <img src="./img/welcome.gif">
    </div>



    <!--功能区-->
    <div class="buttons-container">
        <!-- 音乐播放按钮-->
        <div id="volume-control" class="volume-control">
          <i id="volume-icon" class="volume-icon"></i>
        </div>
    </div>

      
    

    <!--主体部分 | Main page-->
    <main class="wrapper">
        <div id="wrapper-background-filter"></div>
        <div id="wrapper-background"></div>
        <img src="img/background.gif" class="preload" />
        <div id="content">
            <div id="title-container">
                <h1 id="page-title">Welcome to Kirara Miaouu~ &nbsp;</h1>
                <img id="title-img" alt="img of Kirara" class="shake" src="img/favicon.png">
            </div>
            <div id="container">
                <select id="language-selector">
                    <option id="lan1" value="cn" selected>Chinese</option>
                    <option id="lan2" value="ja">Japanese</option>
                    <option id="lan3" value="en">English</option>
                </select>
    
                <select id="mode-selector">
                    <option id="mode1">Default</option>
                    <!-- <option id="mode2">Just Dadada</option>
                    <option id="mode3">Easter egg</option> -->
                </select>
            </div>


            <hr id="subtitle-seperator" />
            <h2 id="page-descriptions">
                The website for Kirara, the <del>annoying</del> cutest genius Genshin
                Impact Cat out there.
            </h2>
            <div id="counter-container">
                <h3 id="counter-descriptions">Kirara has been miaow~ed for</h3>
                <br />
                <br />
                <p id="global-counter">0</p>
                <p id="local-counter">0</p>
                <br />
                <br />
                <button id="counter-button">
                    Let Kirara miaows~!
                </button>
            </div>
            <hr />
            <div id="grid">
                <noscript>Your browser does not support JavaScript or JavaScript has been
                    disabled.<br />This website relies on JavaScript, so please enable it
                    or use another browser.</noscript>
            </div>
        </div>
    </main>

    <!-- 尾部部分 | Footer -->
    <div id="footer">
        <img id="kirara-card" loading="lazy" src="" alt="" /> <!--由JS控制src的具体路径-->
        <div id="footer-text">
            
            <p id="footer-repository-text">
                You can check out the Gitee repository here:
            </p>
            <p>
                <!--这里填写本网站的Github地址-->
                <a href="https://gitee.com/KleeGitee/Klee" target="_blank">
                    <span class="footer-icon-text"
                        id="footer-repository-text-2">Web_OF_Genshin (Gitee)</span></a>
            </p>

            
            <br/>
            <p id="footer-repository-text3">
                This website is based on the repository source code changes
            </p>
            <p>
                <!--source code-->
                <a href="https://github.com/duiqt/herta_kuru" target="_blank"><iconify-icon icon="mdi:github" id="github-footer-icon"
                        class="footer-icon"></iconify-icon><span class="footer-icon-text"
                        id="footer-repository-text-4">SourceCode's repository</span></a>
            </p>


            <br/>
            <p id="credits-gif">Kirara gif made by</p>
            <p>
                <a href="https://twitter.com/Seseren_kr" target="_blank"><iconify-icon icon="mdi:twitter"
                        id="twitter-footer-icon" class="footer-icon"></iconify-icon><span
                        class="footer-icon-text">@Seseren_kr</span></a>
            </p>


        </div>
    </div>
    <script src="./kirarascript.js" async></script>


    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-T303QPC9L9"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-T303QPC9L9');
    </script>

</body>
</html>